<template>
	<view class="content" @click="external">
		<view class="block classify-tab-block">
			<view class="tab-content">
				<view @click="goFound" class="tab-item">推荐{{pageType}}</view>
				<view class="active tab-item">职友圈</view>
			</view>
			<view  class="publish-btn" @click="goPublish">
				+
			</view>
		</view>

		<view class="mine-box">
			<view class="user" v-if="identity == 1">
				<image :src="user?user.faceUrl:imageUrl+'/mine/default_face.png'" class="user-photo"></image>
				<view class="name">{{user.cus.realName}}</view>
			</view>
			<view class="user" v-if="identity == 2">
				<image :src="user?user.faceUrl:imageUrl+'/mine/default_face.png'" class="user-photo"></image>
				<view class="name">{{user.com.realName}}</view>
			</view>

			<view class="tip" v-if="circleType==2" @click="goMyPublish(1)">
				<view>查看全部动态</view>
				<view class="iconfont icon-gengduo1 arrow"></view>
			</view>
			<view class="tip" v-if="circleType==1" @click="goMyPublish(2)">
				<view>查看我的动态</view>
				<view class="iconfont icon-gengduo1 arrow"></view>
			</view>
		</view>

		<view class="block list-block">
			<view class="list-item circle-item" v-for="(item,index) in circleList" :key="item.id">
				<view class="info-block">
					<image :src="item.faceUrl?item.faceUrl:imageUrl+'/mine/default_face.png'" mode="widthFix"
						class="user-photo"></image>
					<view class="name">
						<!-- 点击姓名跳转到求职者或hr详情 -->
						<view>{{item.realName}}</view>
						<view v-if="item.enterpriseName != ''" class="addition-name">
							<view class="spot">·</view>
							<view class="">{{item.enterpriseName}}</view>
						</view>
					</view>
				</view>
				<view class="content-block">
					<view :class="isShowAllContent[item.id]?'content':'part-content'">
						<!-- <text class="keyword" v-for="(item_keyword) in item.keywordList">#{{item_keyword}}#</text> -->
						{{item.content}}
						<!-- <text class="aite" v-for="(item_aite) in item.aiteList">@{{item_aite}}</text> -->
					</view>
					<view class="all" @click="showAllContent(item.id)" v-if="isShowAllTips[item.id]">
						{{isShowAllContent[item.id]?'收起':'全文'}}
					</view>
				</view>

				<view class="up-page">
					<!--图片-->
					<view class="show-box" v-for="(item1,index1) in item.imgList" :key="index1">
						<image class="full" :src="item1.imgUrl" :data-src="image"
							@tap="previewImage(item1.imgUrl,item.id)">
						</image>
					</view>
					<!--视频-->
					<view class="show-box" v-for="(item2, index2) in item.videoList" :key="index2">
						<video class="full" :src="item2.imgUrl"></video>
					</view>
				</view>
				<view>
					
				</view>
				
				<view class="operate-block">
					<view class="time">{{item.formatTime}}</view>
					<view class="operate">
						<view class="operate-item" v-if="isShowOperate[item.id]">
							<view class="item" @click="doOperate(1,1,item.id)" v-if="item.sentry===2">
								<image :src="imageUrl+'/found/like_operate.png'" mode="widthFix" class="operate-icon">
								</image>
								<view class="operate-name">赞</view>
							</view>
							<view class="item" @click="doOperate(3,1,item.id)" v-if="item.sentry===1">
								<image :src="imageUrl+'/found/like_operate_red.png'" mode="widthFix"
									class="operate-icon">
								</image>
								<view class="operate-name">取消</view>
							</view>
							<view class="item" @click.stop="doOperate(2,2,item.id)">
								<image :src="imageUrl+'/found/comment_operate.png'" mode="widthFix"
									class="operate-icon">
								</image>
								<view class="operate-name">评论</view>
							</view>
						</view>
						<image :src="imageUrl+'/found/more.png'" mode="widthFix" class="icon"
							@click.stop="toggleOperate(item.id)"></image>
					</view>
				</view>
				<view class="comment-block" v-if="item.likeCount>0||item.shareLikesComList.length>0">
					<view class="like-item" v-if="item.likeCount>0">
						<image :src="imageUrl+'/found/like_icon.png'" mode="widthFix" class="like-icon"></image>
						<span class="like-text"> {{item.likeCount}}人觉得很赞</span>
					</view>
					
					<view class="comment-list" v-if="item.shareLikesComList.length>0"
						v-for="(item_comment) in item.shareLikesComList">
						<view class="comment-item" @longtap="longTapComment(item.id,item_comment.id,item_comment.userId)">
							<view class="content"><text class="name">{{item_comment.starName}}</text>：</text>{{item_comment.comments}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部加载提示 -->
			<view class='loadingicon' v-if='circleList.length > 0'>
				<text class='loading iconfont icon-jiazai' :hidden="loading==false"></text>{{loadTitle}}
			</view>
			<view v-if="circleList.length == 0 && (page != 1 || circleType == 1)" class="block list-block">
				<view class="empty">暂无数据</view>
			</view>
		</view>
		
		<!-- 评论弹出的键盘输入区域-->
		<view class="keyboard-box" :style="'bottom:'+keyboardHeight+'rpx;'" v-if="showInput">
			<input v-model="commentsText" @keyboardheightchange="keyboardEve" @confirm="submitComments"
				:focus="true" confirm-type="done" :confirm-hold="true" :adjust-position="false" placeholder="评论"/>
		</view>
	</view>
</template>

<script>
	import {
		getStorage
	} from '@/util/auth.js';
	import {
		getCircleList,
		doOperateLike,
		doOperateNoLike,
		doOperateComment,
		deleteComment,
		findComByIdApi
	} from '@/api/circle.js';
	import {SplitArray} from '@/util/util.js'
	export default {
		data() {
			return {
				imageUrl: '',
				pageType: '',
				

				isShowAllTips: {
					/*1: true,
					2: false,
					3: false*/
				},
				isShowAllContent: {
					/*1: false,
					2: false,
					3: false*/
				},
				isShowOperate: {
					/*1: false,
					2: false,
					3: false*/
				},

				circleType: 1, //1默认全部 2自己
				page: 1,
				limit: 10,
				loadend: false,
				loading: false,
				loadTitle: '加载更多',
				circleList: [

					
				],

				//评论
				showInput: false,
				commentsText: '',
				commentsId: 0,
				commentsType: 0,
				keyboardHeight: 0,
			}
		},
		methods: {
			showAllContent(id) {
				this.isShowAllContent[id] = !this.isShowAllContent[id];
			},

			//前往推荐求职者/职位
			goFound() {
				uni.switchTab({
					url: '/pages/found/index'
				})
			},

			//发布职友圈
			goPublish() {
				uni.navigateTo({
					url: '/page_other/circle/publish'
				})
			},

			//我的发布
			goMyPublish(e) {
				this.circleType = e;
				this.circleList = []
				this.page = 1
				this.loadend = false
				this.isShowAllTips = {};
				this.isShowAllContent = {};
				this.isShowOperate = {};
				this.getList();
			},

			//职友圈列表
			getList() {
				uni.showLoading({
					title: '正在加载数据',
					mask: true
				})

				if (this.loadend) {
					uni.hideLoading()
					return;
				}
				if (this.loading) return;
				var limit = this.limit;
				var page = this.page;
				this.loading = true;
				this.loadTitle = '';

				getCircleList({circleType:this.circleType,page:page,limit:limit}).then((res) => {
				uni.hideLoading()
				let newList = res.modelList;
				let list = SplitArray(newList, this.circleList);
				let loadend = newList.length < limit;
				this.circleList = list;
				this.page = this.page + 1;
				this.loadend = loadend;
				this.loading = false;
				this.loadTitle = loadend ? '已全部加载' : '加载更多';
				if (newList.length > 0) {
					newList.forEach((item, index) => {
						if(item.content.length>60)
						{
							this.$set(this.isShowAllTips, item.id, true); //对象拼接
						}else{
							this.$set(this.isShowAllTips, item.id, false); //对象拼接
						}
						
						this.$set(this.isShowAllContent, item.id, false); //对象拼接
						this.$set(this.isShowOperate, item.id, false); //对象拼接
						console.log(this.isShowAllTips)
					})
				}
				console.log(this.circleList)
				}).catch((res) => {
				this.loading = false;
				this.loadTitle = '加载更多';
				uni.hideLoading()
				})
			},

			//关闭所有操作栏
			external() {
				for (let items in this.isShowOperate) { //这个循环的时候要用for in 来遍历 当前选中下标为true 其他的下标为false 避免多选
					this.isShowOperate[items] = false;
				}

				this.commentsText = ''
				this.showInput = false;
				this.commentsType = 0;
				this.commentsId = 0;
			},

			//开启/关闭点击的操作栏
			toggleOperate(id) {
				//关闭其他职友圈的操作栏
				//打开/关闭当前
				for (let items in this.isShowOperate) { //这个循环的时候要用for in 来遍历 当前选中下标为true 其他的下标为false 避免多选	
					if (items != id) {
						this.isShowOperate[items] = false;
					}
				}
				this.isShowOperate[id] = !this.isShowOperate[id];
			},

			//操作 类型（1点赞 2评论 3取消赞）、id
			doOperate(operatetype,type,id) {
				
				switch (operatetype) {
					case 1:
						this.likes(type, id);
						break;
					case 3:
						this.noLikes(type, id);
						break;
					case 2:
						this.comments(type, id);
						break;
				}
			},

			//点赞
			likes(type, id) {
				const form = {};
				form.type = type;
				form.circleId = id;
				form.identity = this.identity; //身份，与token对应判断用户

				uni.showLoading({
					title: '提交中',
					mask: true
				})
				doOperateLike(form).then((res) => {
					uni.hideLoading()
						//不提示成功信息，将circleList中本条职友圈的点赞列表属性加上该人员
						this.circleList.forEach((item, index) => {
							if (item.id == id) {
								this.circleList[index].likeCount+=1
								this.circleList[index].sentry=1
							}
						})

					
				}).catch((res) => {
					uni.hideLoading()
				})
			},

			//取消
			noLikes(type, id) {
				const form = {};
				form.type = type;
				form.circleId = id;
				form.identity = this.identity; //身份，与token对应判断用户

				uni.showLoading({
					title: '提交中',
					mask: true
				})

				doOperateNoLike(form).then((res) => {
					uni.hideLoading()
						//不提示成功信息，将circleList中本条职友圈的点赞列表属性取消该人员
						this.circleList.forEach((item, index) => {
							if (item.id == id) {
								this.circleList[index].sentry=2
								this.circleList[index].likeCount-=1
							}
						})

					
				}).catch((res) => {
					uni.hideLoading()
				})
			},

			//预览图片
			previewImage: function(e, id) {
				var urls = [];
				this.circleList.forEach((item, index) => {
					if (item.id == id) {
						item.imgList.forEach((item1, index) => {
							urls = urls.concat(item1.imgUrl);
						})
						return;
					}
				})

				uni.previewImage({
					current: e,
					urls: urls
				});
			},

			comments(type, id) {
				this.showInput = true;
				this.commentsType = type;
				this.commentsId = id;
				
			},
			keyboardEve(e) {
				const height = e.detail.height * 750 / uni.getSystemInfoSync().windowWidth
				this.keyboardHeight = height;
			},
			submitComments() {
				const commentsText = this.commentsText;
				const commentsType = this.commentsType;
				const commentsId = this.commentsId;
				const form = {};
				form.type = commentsType;
				form.circleId = commentsId;
				form.comments = commentsText;
				form.identity = this.identity; //身份，与token对应判断用户
				
				uni.showLoading({
					title: '提交中',
					mask: true
				})

				doOperateComment(form).then((res) => {
					
					uni.hideLoading()
						//不提示成功信息，将circleList中本条职友圈的评论列表属性加上该人员的评论
						this.circleList.forEach((item, index) => {
							if (item.id == this.circleList[index].id) {
								findComByIdApi({id: this.circleList[index].id}).then((res) => {
										console.log(res)
										this.circleList[index].shareLikesComList = res;
									}).catch((res) => {
									uni.hideLoading()
								})
								
							}
						})

					
				}).catch((res) => {
					uni.hideLoading()
				})

				this.commentsText = '';
				uni.hideKeyboard();
				this.showInput = false;
				this.commentsType = 0;
				this.commentsId = 0;
			},
			
			// 长按
			longTapComment(circleId,id,user_id) {
				if(user_id == this.user.id){
					var that = this;
					uni.showModal({    // 弹框询问是否进行下一步事件
					    title: '提示',
					    content: '是否删除该评论',
					    success: function(res) {
					        if (res.confirm) {

					            that.deleteComment(circleId,id)
								
					            
								
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            return
					        }
					    }
					});
				}
			    
			},
			//删除评论
			deleteComment(circleId,id) {
				const form = {};
				form.id = id;
				form.identity = this.identity; //身份，与token对应判断用户
				uni.showLoading({
					title: '提交中',
					mask: true
				})

				deleteComment(form).then((res) => {
					//查询完成回显最新评论
					this.circleList.forEach((item, index) => {
						if (item.id == circleId) {
							findComByIdApi({id: circleId}).then((res) => {
									this.circleList[index].shareLikesComList = res;
								}).catch((res) => {
								uni.hideLoading()
							})
						}
					})
				}).catch((res) => {
					uni.hideLoading()
				})
			},



		},
		computed: {
			identity() {
				return this.$store.getters.identity
			},
			user() {
				return this.$store.getters.user;
			}
		},

		onLoad(e) {
			this.pageType = this.identity == 1 ? '职位' : '求职者';
			this.imageUrl=this.globalConfig.imageUrl;
			this.getList();
		},

		/**
		 * 监听用户下拉动作
		 */
		onPullDownRefresh() {
			this.circleList = [];
			this.page = 1;
			this.loadend = false;
			this.isShowAllTips = {};
			this.isShowAllContent = {};
			this.isShowOperate = {};
			this.getList();
			uni.stopPullDownRefresh();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			this.getList();
		},

	}
</script>

<style lang="scss" scoped>
	$box-shadow: 0 0 10px 0 #efefef;

	page {
		background: #FAFAFA;
	}

	.content {
		width: 100%;

		.keyboard-box {
			width: 100%;
			position: fixed;
			bottom: 0;
			background-color: #fff;
			display:flex;
			justify-content: center;
			align-items: center;
			padding:20rpx;
			border-top:1px solid #f6f6f6;

			input {
				width:100%;
				height:70rpx;
				padding:0 0 0 20rpx;
				background-color: #f6f6f6;
				border-radius: 35rpx;
				//transform: translate(-50%, -50%);
				//left: 50%;

			}

		}

		.mine-box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;

			.user {
				display: flex;
				flex-direction: row;
				align-items: center;

				.user-photo {
					width: 110rpx;
					height: 110rpx;
					margin-right: 10rpx;
					border-radius: 10rpx;
				}

				.name {
					font-weight: bold;
				}
			}

			.tip {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 30rpx;
				color: #0b93e1;
			}
		}

		.loadingicon {
			width: 100%;
			height: 80rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
		}

		.loading {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			align-items: center;
			justify-content: center;
			position: relative;
			text-align: center;
		}

		.loading .line {
			position: absolute;
			width: 450rpx;
			left: 150rpx;
			top: 50rpx;
			height: 1px;
			border-top: 1px solid #eee;
		}

		.loading .text {
			position: relative;
			display: inline-block;
			padding: 0 20rpx;
			background: #fff;
			z-index: 2;
			color: #777;
		}

		.loadingicon .loading {
			animation: load linear 1s infinite;
			font-size: 45rpx;
			color: #000;
		}

		.loadingicon {
			width: 100%;
			height: 80rpx;
		}

		//padding: 30rpx;
		.tips {
			width: 70%;
			padding: 10rpx 20rpx;
			margin: auto;
			background-color: #ff7626;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
			border-radius: 60rpx;

		}

		.block {
			width: 100%;
			padding: 20rpx 30rpx;
			margin-bottom: 20rpx;
			position: relative;
		}

		.block.classify-tab-block {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.tab-content {
				display: flex;
				flex-direction: row;
				justify-content: left;

				.tab-item {
					padding: 10rpx 30rpx;
					font-weight: bold;
					font-size: 36rpx;
					margin-right: 20rpx;
					flex: none;
				}

				.tab-item.active {
					background: url("https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/job_hunting/home/tab_selected_bg.png") no-repeat right bottom;
					background-size: 70%;
				}
			}

			.publish-btn {
				font-size: 34px;
			}

			.iconfont {
				font-size: 32rpx;
				font-weight: bold;
				color: #000;
			}
		}

		.block.label-block {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: left;
			align-items: center;

			.label-content {
				width: calc(100% - 110rpx);
				display: flex;
				flex-direction: row;
				justify-content: left;
				align-items: center;

				.label-item {
					padding: 10rpx 30rpx;
					font-size: 28rpx;
					color: #999;
					background: #F3F3F3;
					margin-right: 20rpx;
				}

				.label-item.active {
					color: #FE7526;
					background: #FDECE5;
				}

			}

			.font-text {
				font-size: 28rpx;
			}

			.iconfont {
				font-size: 38rpx;
				font-weight: bold;
				margin-right: 10rpx;
			}
		}

		.block.list-block {
			box-shadow: none;
			display: flex;
			flex-direction: column;
			margin-bottom: 0;

			.list-item {
				width: 100%;
				background: #fff;
				border-radius: 10rpx;
				box-shadow: $box-shadow;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-bottom: 20rpx;

				.box-mode {
					width: 26vw;
					height: 26vw;

					border-radius: 8rpx;
					overflow: hidden;
				}

				.full {
					width: 100%;
					height: 100%;
				}

				.up-page {
					display: flex;
					flex-wrap: wrap;
					display: flex;
					width: 100%;
					//margin-bottom: 40rpx;

					.show-box:nth-child(3n) {
						margin-right: 0;
					}

					.show-box {
						position: relative;
						margin-bottom: 3vw;
						margin-right: 3vw;
						@extend .box-mode;
					}
				}

				.detail-info {
					width: 180rpx;
					height: 200rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;

					.name {
						width: 110rpx;
						font-size: 24rpx;
						color: #999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: center;
						text-indent: 20rpx;
					}

					.photo {
						width: 70rpx;
						height: 70rpx;
						border-radius: 100%;
						background: #efefef;
					}

					.apply-btn {
						border: 1px solid #FE7526;
						border-radius: 8rpx;
						color: #FE7526;
						font-size: 24rpx;
						padding: 8rpx 28rpx;
						position: relative;
						left: 30rpx;
					}
				}

				.list-info {
					width: calc(100% - 180rpx);
					display: flex;
					flex-direction: column;

					view {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.title {
						color: #000;
						font-weight: bold;
						font-size: 34rpx;
					}

					.address {
						color: #999;
						font-size: 26rpx;
						margin-top: 20rpx;
					}

					.label-block {
						font-size: 24rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: left;
						margin-top: 20rpx;

						.label-item {
							padding: 8rpx 20rpx;
							background: #F5F6F8;
							color: #999;
							margin: 0 10rpx 20rpx 0;
						}
					}

					.wage {
						color: #FE7526;
						font-size: 36rpx;
						font-weight: bold;

						.unit {
							font-size: 28rpx;
							font-weight: normal;
						}
					}
				}
			}

			.list-item:last-child {
				margin-bottom: 0;
			}

			.person-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 0 30rpx;
				margin-bottom: 30rpx;

				.info-block,
				.job-block {
					width: 100%;
					padding: 20rpx 0;
				}

				.info-block {
					border-bottom: 1px solid #efefef;
					display: flex;
					flex-direction: row;
					align-items: center;

					.user-photo {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.info {
						width: calc(100% - 120rpx);
						margin-left: 20rpx;
						font-size: 26rpx;

						.name {
							font-weight: bold;
							font-size: 34rpx;
						}

						.other {
							color: #999;
							margin-top: 14rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.job-block {
					display: flex;
					flex-direction: row;
					align-items: center;

					.job {
						width: calc(100% - 140rpx);
						display: flex;
						flex-direction: column;
						justify-content: center;

						.label-block {
							width: 100%;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;

							.label-item {
								background: #F4F5F7;
								color: #999;
								font-size: 24rpx;
								padding: 4rpx 10rpx;
								margin-right: 20rpx;
								margin-bottom: 20rpx;
							}
						}

						.job-content {
							width: 100%;
							font-size: 26rpx;
						}
					}

					.btn-block {
						width: 140rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.btn {
							padding: 6rpx 26rpx;
							border: 1px solid #FE7526;
							border-radius: 6rpx;
							color: #FE7526;
							font-size: 24rpx;
						}
					}
				}
			}

			.person-item:last-child {
				margin-bottom: 0;
			}

			.circle-item {
				display: flex;
				flex-direction: column;
				padding: 30rpx 30rpx 15rpx 30rpx;

				.info-block {
					display: flex;
					align-items: center;

					.user-photo {
						width: 70rpx;
						height: 70rpx;
						border-radius: 35rpx;
						margin-right: 15rpx;
					}

					.name {
						width: calc(100% - 70rpx - 15rpx);
						font-size: 30rpx;
						display: flex;
						align-items: center;
						color: #0b93e1;

						.addition-name {
							display: flex;
							flex-direction: row;
							align-items: center;

							.spot {
								padding: 0 5rpx;
							}
						}
					}
				}

				.content-block {
					font-size: 30rpx;
					padding: 15rpx 0 0rpx 0;
					margin-bottom: 20rpx;

					.part-content {
						line-height: 50rpx;
						display: -webkit-box;
						overflow: hidden;
						/*超出隐藏*/
						text-overflow: ellipsis;
						/*隐藏后添加省略号*/
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3; //想显示多少行

						.keyword {
							color: #0b93e1;
						}

						.aite {
							color: #0b93e1;
						}
					}

					.content {
						line-height: 50rpx;

						.keyword {
							color: #0b93e1;
						}

						.aite {
							color: #0b93e1;
						}
					}

					.all {
						width: 60rpx;
						;
						margin-top: 10rpx;
						color: #ff7626;
					}
				}

				.video-block {
					width: 100%;

					.video-item {
						width: 400rpx;
						height: 300rpx;
					}
				}

				.operate-block {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.time {
						color: #999999;
						font-size: 28rpx;
					}

					.operate {
						display: flex;
						align-items: center;
						height: 70rpx;
						position: relative;

						.operate-item {
							width: 320rpx;
							height: 70rpx;
							border-radius: 6rpx;
							background-color: #616161;
							display: flex;
							flex-direction: row;
							position: absolute;
							right: 70rpx;

							.item {
								width: calc(100% / 2 - 1px);
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: center;
								border-right: 1px solid rgba(0, 0, 0, .1);

								.operate-icon {
									width: 30rpx;
									margin-right: 5rpx;
								}

								.operate-name {
									font-size: 28rpx;
									color: #ccc;
								}
							}

							.item:last-child {
								border: 0;
							}
						}

						.icon {
							width: 65rpx;
							margin-left: 10rpx;
						}
					}

				}

				.comment-block {
					background-color: #f0f0f0;
					border-radius: 6rpx;
					padding: 20rpx;
					margin-top: 10rpx;
					display: flex;
					flex-direction: column;

					.like-item {
						width: 100%;
						margin: auto;
						border-bottom: 1px solid #ccc;
						padding-bottom: 15rpx;

						.like-icon {
							width: 35rpx;
							position: relative;
							top: 4rpx;
						}
						.like-text{
							font-size: 12px;
							color: #0b92e0;
							padding-left: 20rpx;
						}

						.name {
							font-size: 28rpx;
							color: #0b92e0;
							margin-left: 7rpx;
						}

						.comma {
							color: #0b92e0;
						}
					}

					.divide-line {
						padding-bottom: 20rpx;
						border-bottom: 1px solid #ccc;
					}

					.comment-list {
						display: flex;
						flex-direction: column;
						padding-top: 10rpx;

						.comment-item {
							.content {
								font-size: 30rpx;
								line-height: 50rpx;
								display: -webkit-box;
								overflow: hidden;
								/*超出隐藏*/
								text-overflow: ellipsis;
								/*隐藏后添加省略号*/
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 3; //想显示多少行

								.name {
									color: #0b92e0;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
